<template>
  <div class="min-h-screen bg-white">
    <!-- 导航栏 -->
    <nav
      class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-50 via-white to-pink-50 shadow-sm z-50"
    >
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
            <div class="text-2xl font-serif text-purple-900">丝韵NFT</div>
          </div>
          <div class="hidden md:flex items-center space-x-8">
            <a href="#" class="text-gray-700 hover:text-purple-900">首页</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">商品分类</a>
            <a href="#" class="text-gray-700 hover:text-purple-900">艺术家</a>
            <a href="#" @click="goToTracePage" class="text-gray-700 hover:text-purple-900">溯源查询</a>
            <div class="relative">
              <input
                type="text"
                class="w-48 py-2 pl-10 pr-4 text-sm text-gray-700 bg-gray-100 rounded-lg border-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                placeholder="搜索丝绸艺术品..."
                v-model="searchQuery"
              />
              <i
                class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
              ></i>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <i class="el-icon-user-solid"></i>
            <i class="el-icon-shopping-cart-2"></i>
          </div>
        </div>
      </div>
    </nav>
    <goodsBanner/>
    <!-- 商品列表 -->
    <section class="py-16 bg-gradient-to-r from-purple-100/30 to-pink-100/30">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-8 mt-6">
          <span
            class="text-gray-900 bg-gradient-to-r from-purple-900 to-pink-900 bg-clip-text text-transparent"
          >
            全部结果
          </span>
          <a
            href="#"
            class="text-purple-900 hover:text-purple-700 flex items-center"
          >
            <el-select placeholder="排序方式" class="w-32">
              <el-option label="最新上架" value="newest" />
              <el-option label="价格从低到高" value="price_asc" />
              <el-option label="价格从高到低" value="price_desc" />
            </el-select>
          </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
          <div
            v-for="(item, index) in hotItems"
            :key="index"
            class="bg-white rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-transform duration-300"
          
            @click="openProductDetail(item)"  >
            <div class="relative h-64" >
              <img
                :src="item.image"
                class="w-full h-full object-cover"
                :alt="item.name"
              />
            </div>
            <div class="p-4">
              <h3 class="text-lg font-medium text-gray-900">{{ item.name }}</h3>
              <!-- <p class="text-sm text-gray-500 mb-2">{{ item.artist }}</p> -->
              <div class="flex justify-between items-center">
                <span>{{ item.price }} ETH</span>
                <el-button
                  class="!rounded-button bg-purple-600 text-white px-3 py-1.5 text-sm whitespace-nowrap hover:bg-purple-700"
                  @click.stop="addToCart(product)"
                >
                  加入购物车
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 分页 -->
    <div class="flex justify-center mt-8 mb-12">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="totalItems"
        :page-sizes="[20, 40, 60, 80]"
        layout="total, sizes, prev, pager, next, jumper"
        
      />
    </div>
    <!-- 商品详情弹窗 -->
    <div
      v-if="selectedProduct"
      class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"
      @click="selectedProduct = null"
    >
      <div
        class="bg-white rounded-xl w-2/4 max-h-[80vh] overflow-hidden flex"
        @click.stop
      >
        <!-- 左侧轮播图 -->
        <div class="w-1/2 bg-gray-100">
            <img :src="selectedProduct.image" class="w-full h-full object-cover object-top" />

        </div>

        <!-- 右侧信息 -->
        <div class="w-1/2 p-8 overflow-y-auto">
          <h2 class="text-2xl font-medium text-gray-800">
            {{ selectedProduct.name }}
          </h2>
          <p class="mt-2 text-gray-500">NFT编号: #{{ selectedProduct.id }}</p>

          <div class="mt-4 flex items-center space-x-2">
            <i class="fab fa-ethereum text-purple-600 text-xl"></i>
            <span class="text-2xl font-medium text-purple-600">{{
              selectedProduct.price
            }}</span>
          </div>

          <div class="mt-8">
            <h3 class="text-lg font-medium text-gray-800">商品故事</h3>
            <p class="mt-2 text-gray-600 leading-relaxed w-full">
              {{ selectedProduct.story }}
            </p>
          </div>

          <div class="mt-8">
            <h3 class="text-lg font-medium text-gray-800">溯源信息</h3>
            <div class="mt-2 space-y-2">
              <div class="flex items-start">
                <span class="w-20 text-gray-500">制作工艺:</span>
                <span class="text-gray-700">{{
                  selectedProduct.craftsmanship
                }}</span>
              </div>
              <div class="flex items-start">
                <span class="w-20 text-gray-500">材质:</span>
                <span class="text-gray-700">{{
                  selectedProduct.material
                }}</span>
              </div>
              <div class="flex items-start">
                <span class="w-20 text-gray-500">产地:</span>
                <span class="text-gray-700">{{ selectedProduct.origin }}</span>
              </div>
            </div>
          </div>

          <button
            class="!rounded-button mt-8 w-full bg-purple-600 text-white py-3 text-lg font-medium hover:bg-purple-700 whitespace-nowrap"
            @click="addToCart(selectedProduct)"
          >
            溯源码查询
          </button>
        </div>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button
      v-show="showBackTop"
      @click="scrollToTop"
      class="!rounded-button fixed bottom-8 right-8 bg-purple-900 text-white w-12 h-12 flex items-center justify-center shadow-lg hover:bg-purple-800"
    >
      <i class="el-icon-top"></i>
    </button>
    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-16">
      <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-2xl font-serif mb-4">丝韵NFT</h3>
            <p class="text-gray-400">传承千年丝绸艺术，链接数字未来</p>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-twitter text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-instagram text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white">
                <i class="fab fa-discord text-xl"></i>
              </a>
            </div>
          </div>
          <div>
            <h4 class="font-medium mb-4">快速链接</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">市场</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">艺术家</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">收藏品</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">社区</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">帮助中心</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white">新手指南</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">常见问题</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">用户协议</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-4">订阅更新</h4>
            <p class="text-gray-400 mb-4">获取最新艺术品和活动信息</p>
            <div class="flex">
              <input
                type="email"
                placeholder="输入邮箱地址"
                class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full"
              />
              <button
                class="!rounded-button bg-purple-900 text-white px-4 py-2 rounded-r-lg hover:bg-purple-800"
              >
                订阅
              </button>
            </div>
          </div>
        </div>
        <div
          class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"
        >
          <p>&copy; 2025 丝韵NFT. 保留所有权利</p>
        </div>
      </div>
    </footer>
  </div>
</template>
  
  <script>
import goodsBanner from '../../components/nft/goods-banner.vue';

export default {
  components: {
    goodsBanner,
  },
  data() {
    return {
      searchQuery: "",
      showLoginModal: false,
      showCart: false,
      showBackTop: false,
      cartCount: 2,
      cartTotal: 1.24,
      currentPag: 1,
      pageSize: 20,
      totalItems: 100,
      selectedProduct: null,
      loginForm: {
        username: "",
        password: "",
      },
      hotItems: [
        {
          image: require("@/assets/tu/tu1.jpg"),
          name: "紫金云锦丝巾",
          artist: "张明华",
          price: "0.88",
          id:"#000003",
          story:"这件作品融合了传统与现代的艺术理念，采用纯手工刺绣技艺，历时三个月精心打造。每一针每一线都凝聚着匠人的智慧与匠心，作品展现了东方传统文化的精髓与艺术魅力。"
        },
        {
          image:require("@/assets/tu/tu2.jpg"),
          name: "翡翠旗袍",
          artist: "李玉婷",
          price: "1.28",
        },
        {
          image:require("@/assets/tu/tu3.jpg"),
          name: "山水织锦",
          artist: "王德明",
          price: "2.35",
        },
        {
          image:require("@/assets/tu/tu4.jpg"),
          name: "孔雀刺绣",
          artist: "陈巧玲",
          price: "1.56",
        },
        {
          image: require("@/assets/tu/tu18.jpg"),
          name: "精修花纹手绢",
          artist: "程荣华",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu19.jpg"),
          name: "沙鸣花开方巾",
          artist: "李玉婷",
          price: "1.28",
        },
        {
          image: require("@/assets/tu/tu20.jpg"),
          name: "紫气东来方巾",
          artist: "王德明",
          price: "2.35",
        },
        {
          image: require("@/assets/tu/tu21.jpg"),
          name: "经纶印记丝巾",
          artist: "陈巧玲",
          price: "1.56",
        },
        {
          image: require("@/assets/tu/tu22.jpg"),
          name: "天女散花",
          artist: "陈巧燕",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu23.jpg"),
          name: "融",
          artist: "江平",
          price: "1.28",
        },
        {
          image: require("@/assets/tu/tu24.jpg"),
          name: "华领绸",
          artist: "余月虹",
          price: "2.35",
        },
        {
          image: require("@/assets/tu/tu25.jpg"),
          name: "青花瓷",
          artist: "尤珈",
          price: "1.56",
        },
        {
          image: require("@/assets/tu/tu26.jpg"),
          name: "经纶天地丝巾",
          artist: "张锦道",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu27.jpg"),
          name: "品蓝绸多子多福枕顶",
          artist: "李凯喜",
          price: "1.28",
        },
        {
          image: require("@/assets/tu/tu28.jpg"),
          name: "蓝地花鸟纹古香缎",
          artist: "余月虹",
          price: "2.35",
        },
        {
          image: require("@/assets/tu/tu29.jpg"),
          name: "海上旧梦",
          artist: "傅蓝月",
          price: "1.56",
        },
        {
          image: require("@/assets/tu/tu30.jpg"),
          name: "亘古",
          artist: "马艺耘",
          price: "0.88",
        },
        {
          image: require("@/assets/tu/tu31.png"),
          name: "宋之雅韵",
          artist: "李微",
          price: "1.28",
        },
        {
          image: require("@/assets/tu/tu32.jpg"),
          name: "香云故里",
          artist: "金憓",
          price: "2.35",
        },
        {
          image: require("@/assets/tu/tu33.jpg"),
          name: "锦江诗夜",
          artist: "姜佩",
          price: "1.56",
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    openProductDetail(product) {
      // this.selectedProduct = product;
      this.$router.push('/nft/detail');
    },
    handleScroll() {
      this.showBackTop = window.pageYOffset > 300;
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleLogin() {
      // 这里添加登录逻辑，例如发送请求到后端验证
      this.showLoginModal = false;
    },
    handleCheckout() {
      // 这里添加结算逻辑，例如计算总价、提交订单等
      this.showCart = false;
    },
    removeFromCart(index) {
      this.cartItems.splice(index, 1);
      // 重新计算购物车数量和总价
      this.cartCount = this.cartItems.length;
      this.cartTotal = this.cartItems.reduce(
        (acc, item) => acc + parseFloat(item.price),
        0
      );
    },
    goToTracePage() {
      this.$router.push('/blockTrace/index');
    },
  },
};
</script>
  
  <style scoped>
@import "../..//assets/tailwind.css";
.custom-login-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg;
}
.custom-login-input:focus {
  @apply outline-none ring-2 ring-purple-500 border-transparent;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* 移除number输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>